import { Button, Col, Form, Input, Row } from "antd"
import { useEffect, useState } from "react"

const ConfigView = (props: any) => {
    const isControlled = typeof props.value !== 'undefined'
    const [tree, setTree] = useState([]);
    const [value, setValue] = useState({});
    useEffect(() => {
        if (isControlled) {
            const arr = []
            Object.keys(props.value).forEach(key => {
                arr.push({
                    key,
                    value: props.value[key]
                })
            })
            setTree([...arr])
        }else{
            const arr = []
            Object.keys(value).forEach(key => {
                arr.push({
                    key,
                    value: value[key]
                })
            })
            setTree([...arr])
        }
    },[props.value ])
    //     const [val, setVal] = useState([]);
    // console.log('valuevalue',value)
    //     useEffect(() => {
    //         const v = typeof value === 'string' ? JSON.parse(value) : (value||{})
    //         const arr = [];
    //         console.log('ssss',v)
    //         console.log('ssss',v)
    //         Object.keys(v).forEach(key => {
    //             arr.push({
    //                 key,
    //                 value: v[key]
    //             })
    //         })
    //         setVal([...arr])
    //         // setVal({ ...v })
    //     }, [])
    //     // console.log('value', v)
    //     const onAdd = () => {
    //         const v = [...val];
    //         v.push({
    //             key: 'Key' + v.length,
    //             value: ''
    //         })
    //         setVal([...v])
    //         // noticeChange();./
    //         // const v = { ...val }
    //         // let len = Object.keys(val).length;
    //         // v[`key${len}`] = '';
    //         // setVal({ ...v })
    //         // onChange(JSON.stringify(val))
    //     }
    const changeVal = (index, key, value) => {
         const _tree = [...tree];
        _tree[index][key] = value
        setTree([..._tree]);
        // noticeChange()
        // if (isControlled) {

        // } else {

        // }
       
    }
    const onAdd = () => {
        const _tree = [...tree];
        _tree.push({
            key:'Key'+_tree.length,
            value:''
        })
        console.log('sss',tree)
        setTree([..._tree])
        _onChange(_tree)
    }
    const _onChange = (_tree)=>{
            let c = {};
            _tree.forEach(item=>{

                c[item.key] = item.value
            })
            if(props.onChange){
                props.onChange(c)
            }
    }
    const onDel = (index:number)=>{
        const _tree = [...tree];
        _tree.splice(index,1) 
        setTree([..._tree]);
        _onChange(_tree)
    }
     //     useEffect(()=>{
    //         let c = {};
    //         val.forEach(item=>{

    //             c[item.key] = item.value
    //         })
    //         onChange&&onChange(JSON.stringify(c))
    //     },[val])
    // const finaValue = isControlled ? props.value : value
    return <div style={{ background: 'rgb(246 246 246)', padding: 10, borderRadius: 10 }}>
        {
            tree.map((item, index) => {
                return <Row key={index}>
                    <Col span={10}><Form.Item label='Key'>
                        <Input onBlur={()=>{
                             _onChange(tree)
                        }} value={item.key} onChange={e => changeVal(index, 'key', e.target.value)} />
                    </Form.Item></Col>
                    <Col span={10}><Form.Item label='Value'>
                        <Input
                         onBlur={()=>{
                            _onChange(tree)
                       }} 
                        value={item.value} onChange={e => changeVal(index, 'value', e.target.value)} />
                    </Form.Item>
                    
                    </Col>
                    <Col span={4} style={{textAlign:'center'}}>
                      <Button onClick={()=>onDel(index)} style={{ marginTop:5}} danger size='small' shape='round'>删除</Button>
                    </Col>
                </Row>
            })
        }
        <Button block type='dashed' onClick={onAdd}>增加</Button>
    </div>
}
export default ConfigView